<template>
  <div>
    <el-form :model="form" label-width="auto" inline>
      <el-form-item label="提交时间:">
        <el-date-picker v-model="times" type="datetimerange" start-placeholder="开始时间" value-format="x"
          end-placeholder="结束时间" time-format="A hh:mm:ss" />
      </el-form-item>
      <el-form-item label="提交账号:">
        <el-select v-model="form.userId">
          <el-option label="全部" :value="0"></el-option>
          <el-option :label="item.value" :value="item.key"
            v-for="item in store.productPurchaseOrderSearchUserAdminDicArr" clearable :key="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="收货仓库:">
        <el-select v-model="form.warehouseId">
          <el-option label="全部" :value="0"></el-option>
          <el-option :label="item.value" :value="item.key" v-for="item in store.godownHouseArr" clearable
            :key="item.key" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      border>
      <el-table-column type="selection" width="55" />
      <el-table-column label="收货仓库">
        <template #default="scope">{{ scope.row.cloudGoodId }}</template>
      </el-table-column>
      <el-table-column label="提交帐号" width="180">
        <template #default="scope">{{ scope.row.createBy }}</template>
      </el-table-column>
      <el-table-column width="180">
        <template #header>
          <span>提交时间</span>
          <el-icon @click="SortBtn">
            <Sort />
          </el-icon>
        </template>
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="采购信息" width="180">
        <template #default="scope"><span style="color: blue;" class="headclass" @click="openSon(scope.row)">{{
          scope.row.skuInfo
        }}</span></template>
      </el-table-column>
      <el-table-column label="近期销量" width="180">
        <template #default="scope">{{ scope.row.lastSalesNum }}</template>
      </el-table-column>
      <el-table-column label="可用库存" width="180">
        <template #default="scope">{{ scope.row.stockNum }}</template>
      </el-table-column>
      <el-table-column label="需要采购件数">
        <template #default="scope">{{ scope.row.purchaseNum }}</template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="scope">{{ scope.row.status == 0 ? '未审核' :
          scope.row.status == 1 ? '部分通过' : scope.row.status == 2 ? '部分拒绝' : scope.row.status == 3 ? '全部通过' :
            scope.row.status == 4 ? '全部拒绝' : '' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="GOGOGO(scope.row)">
            通过
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="QUQUQU(scope.row)">
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 单独操作 -->
  <div>
    <el-dialog v-model="sonDialog" width="800">
      <span>
        <div><span>仓库产品ID：{{ houseShopName }},{{ skuInfo }},需采购{{ purchaseNum }}件</span>
          <el-button style="margin-left: 20px;" type="primary" @click.prevent="QUQUQUSonEvery">
            选中批量拒绝
          </el-button><el-button style="margin-left: 30px;" type="danger" @click="GOGOGOSonEvery">选中批量通过</el-button>
        </div>
        <div>
          <el-table style="margin-top: 20px ;" :data="tableDataSon" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column label="采购件数" width="180">
              <template #default="scope">{{ scope.row.purchaseNum }}</template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="GOGOGOSon(scope.row)">
                  通过
                </el-button>
                <el-button link type="primary" size="small" @click.prevent="QUQUQUSon(scope.row)">
                  驳回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </span>

    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { productPurchaseOrderList, productPurchaseOrderOrderAudit, productPurchaseOrderListSubOrder } from '@/api/index'
import { useAlertsStore } from '@/store/index'
import { ElMessage } from 'element-plus'
const store = useAlertsStore()
// do not use same name with ref
const form = ref({
  createTimeStart: '',
  createTimeEnd: '',
  userId: 0,
  warehouseId: 0,
  pageSize: 10,
  purchaseStatus: 0,
  createTimeOrder: 0,
  pageNum: 1
})
const times = ref('')
const tableData = ref([])
onBeforeMount(() => {
  store.godownHouse()
  store.productPurchaseOrderSearchUserAdminDicBtn()
})
const onSubmit = () => {
  console.log('submit!')
  form.value.createTimeOrder = 0
  getList()
}
const getList = () => {
  if (times.value) {
    form.value.createTimeStart = times.value[0]
    form.value.createTimeEnd = times.value[1]
  } else {
    form.value.createTimeStart = ''
    form.value.createTimeEnd = ''
  }
  productPurchaseOrderList(form.value).then(res => {
    const { data: { data } } = res
    total.value = data.total
    tableData.value = data.list
  })
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}

// table
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 通过
const fatherIds = ref('')
const GOGOGO = (row) => {
  // fatherIds.value = row.id
  productPurchaseOrderOrderAudit(row.id, {
    status: 1,
    productPurchaseOrderDetailIds: []
  }).then(res => {
    getList()
    ElMessage.success('操作成功')
  })
}
// 通过
const GOGOGOSon = (row) => {
  productPurchaseOrderOrderAudit(fatherIds.value, {
    status: 1,
    productPurchaseOrderDetailIds: [row.id]
  }).then(res => {
    getList()
    ElMessage.success('操作成功')
  })
}
// 通过
const GOGOGOSonEvery = (row) => {
  const a = []
  if (multipleSelection.value.length > 0) {
    multipleSelection.value.forEach(e => {
      a.push(e.id)
    })
    productPurchaseOrderOrderAudit(fatherIds.value, {
      status: 1,
      productPurchaseOrderDetailIds: a
    }).then(res => {
      getList()
      ElMessage.success('操作成功')
    })
  } else {
    ElMessage.error('请先选中数据')
  }
}
// 拒绝
const QUQUQU = (row) => {
  productPurchaseOrderOrderAudit(row.id, {
    status: 2,
    productPurchaseOrderDetailIds: []
  }).then(res => {
    getList()
    ElMessage.success('操作成功')
  })
}
// 拒绝
const QUQUQUSon = (row) => {
  productPurchaseOrderOrderAudit(fatherIds.value, {
    status: 2,
    productPurchaseOrderDetailIds: [row.id]
  }).then(res => {
    getList()
    ElMessage.success('操作成功')
  })
}
// 拒绝
const QUQUQUSonEvery = (row) => {
  const a = []
  if (multipleSelection.value.length > 0) {
    multipleSelection.value.forEach(e => {
      a.push(e.id)
    })
    productPurchaseOrderOrderAudit(fatherIds.value, {
      status: 2,
      productPurchaseOrderDetailIds: a
    }).then(res => {
      getList()
      ElMessage.success('操作成功')
    })
  } else {
    ElMessage.error('请先选中数据')
  }
}
// 单独操作
const sonDialog = ref(false)
const houseShopName = ref('')
const purchaseNum = ref('')
const tableDataSon = ref([])
const skuInfo = ref('')
const openSon = (row) => {
  fatherIds.value = row.id
  console.log('fatherIds.value')
  console.log(fatherIds.value)
  houseShopName.value = row.cloudGoodId
  skuInfo.value = row.skuInfo
  purchaseNum.value = row.purchaseNum
  productPurchaseOrderListSubOrder(row.id).then(res => {
    sonDialog.value = true
    const { data: { data } } = res
    console.log(data)
    tableDataSon.value = data
  })
}

// table排序
const or = ref(1)
const SortBtn = () => {
  console.log('排序')
  if (or.value === 1) {
    or.value = 2
  } else if (or.value === 2) {
    or.value = 1
  }

  form.value.createTimeOrder = or.value
  getList()

  // shopLIst(form.value).then(res => {
  //   const { data: { data } } = res
  //   total.value = data.total
  //   tableData.value = data.list
  //   loading.value = false
  // })
}
</script>

<style lang='less' scoped></style>
